<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid darkviolet;
        }
    </style>
</head>
<body>
<!--

    绘制一个长宽为200px，边框为10px红色，填充颜色为绿色的，且中间部分矩形区域透明的矩形
    作业3：画一个多边形，图片在img文件夹下面
    作业4：画一个心

-->
<canvas id="can" width="900" height="900"></canvas>
<script type="text/javascript">
    var can=document.getElementById("can");
    var pen=can.getContext("2d");
    pen.beginPath();
    pen.moveTo(200,200);
    pen.lineTo(300,200);
    pen.lineTo(350,275);
    pen.lineTo(300,340);
    pen.lineTo(200,340);
    pen.lineTo(150,275);
    pen.strokeStyle="green";
    pen.lineWidth="4";
    pen.closePath();
    pen.stroke();
    pen.beginPath();
    pen.rect(400,400,200,200);
    pen.fillStyle="rgba(0,255,0,0.5)";
    pen.fill();
    pen.closePath();
    pen.stroke();
    //    pen.beginPath();
    pen.moveTo(67,203);
    pen.bezierCurveTo(2,159,1,73,66,118);
    pen.moveTo(66,118);
    pen.bezierCurveTo(106,79,149,121,66,203);
    //    pen.closePath();
    pen.stroke();
</script>
</body>
</html>